<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#top {
			width: 800px;
			height: 600px;
			background-image: url(img/背景.png);
		}
		
		#center {
			height: 475px;
			width: 800px;
		}
		
		#foot {
			height: 125px;
			width: 800px;
			position: relative;
		}
		
		#center div {
			width: 63px;
			height: 71px;
			text-align: center;
			line-height: 71px;
			font-size: 30px;
			font-weight: bold;
			background-image: url(img/苹果.png);
			position: absolute;
		}
		
		#center .posui {
			width: 138px;
			height: 76px;
			background-image: url(img/破裂苹果.png);
		}
		
		#foot-center p {
			color: white;
			display: block;
			font-weight: bold;
			line-height: 10px;
			text-indent: 350px;
		}
	</style>
	<script type="text/javascript">
		var sum1 = 0;
		var sum2 = 0;
		var shijian = 0;
		window.onkeydown = function() {
			var key = event.keyCode;
			var center = document.getElementById("center");
			for (var i = 0; i < center.children.length; i++) {
				var keydom = center.children[i].getAttribute("keydom")
				if (key == keydom) {
					center.removeChild(center.children[i]);
					sum1++;
					break;
				}
			}
		}

		function kaishi() {
			ic = setInterval('setPG()', 1000);
			id = setInterval('yidong()', 100);
			ie = setInterval('zhengquelu()', 1000)
		}

		function setPG() {
			var center = document.getElementById("center");
			var div = document.createElement("div");
			var num = parseInt(Math.random() * 26) + 65;
			div.innerHTML = "&#" + num + ";";
			div.setAttribute("keydom", num);
			div.style.top = "0px";
			div.style.left = parseInt(Math.random() * 700) + 10 + "px";
			center.appendChild(div);
		}

		function yidong() {
			var center = document.getElementById("center");
			center.children.className = "pg";
			for (var i = 0; i < center.children.length; i++) {
				t = parseInt(center.children[i].style.top)
				t += 10;
				center.children[i].style.top = t + "px";
				if (t > 380) {
					center.children[i].className = "posui";
					center.children[i].innerHTML = '';
					sum2++;
				}
				if (t > 400) {
					center.removeChild(center.children[i]);
				}
			}
		}

		function zhanting() {
			clearInterval(id);
			clearInterval(ic);
			clearInterval(ie);
		}

		function jieshu() {
			zhanting();
			var span1 = document.getElementById('span1');
			var span2 = document.getElementById('span2');
			var span3 = document.getElementById('span3');
			ing.style.display = "none";
			span1.innerHTML = "100%";
			span2.innerHTML = "0秒";
			span3.innerHTML = "0字/分钟";
			var center = document.getElementById("center");
			var m = center.children.length;
			for (var i = 0; i < m; i++) {
				center.removeChild(center.children[0]);
			}
		}

		function zhengquelu() {
			shijian++
			var span1 = document.getElementById('span1');
			var span2 = document.getElementById('span2');
			var span3 = document.getElementById('span3');
			var ing = document.getElementById("ing");
			if (sum1 == 10) {
				ing.style.display = "block"
			}
			if (sum1 + sum2 > 0) {
				span1.innerHTML = parseInt((sum1 / (sum1 + sum2)) * 100) + "%"
			}
			span2.innerHTML = shijian + "秒"
			span3.innerHTML = parseInt(sum1 / shijian * 60) + "字/分钟"
		}
	</script>

	<body>
		<div id="top">
			<div id="center">

			</div>
			<div id="foot">
				<input type="button" name="" id="" value="开始" onclick="kaishi(1)" />
				<input type="button" name="" id="" value="暂停" onclick="zhanting()" />
				<input type="button" name="" id="" value="结束" onclick="jieshu()" />
				<div id="foot-center">
					<p>正确率：<span id="span1">100%</span></p>
					<p>时间：<span id="span2">0秒</span></p>
					<p>速度：<span id="span3">0字/分钟</span></p>
				</div>
			</div>
		</div>
	</body>

</html>